            <div id="wish_list" selected="true" class="edgetoedge form">
                <div class="toolbar">
                    <h1>Todos</h1>
                    <a href="#" class="back">Back</a>
                    <a class="button" href="<%="/movies/wish_list/100"%>">Next</a>

                </div>
                <form>
                <ul class="incomplete">
                 <%@records.each{|r|%>

                    <li><input type="checkbox" id="<%=r.id%>"/> <span><%=r.name%></span> </li>
                    <%}%>
                </ul>
                <h4>Completed</h4>
                <ul class="complete">
                </ul>
                </form>
            </div>
<script>
$('input[type="checkbox"]').live('change', function(){
                    var $el = $(this);
                    if ($el.attr('checked')) {
                        $el.parent().prependTo('.complete');
                        $.ajax({url:"/movies/seen/"+$el.attr("id")});
                    } else {
                        $el.parent().appendTo('.incomplete');
                    }
                });
</script>
        <style type="text/css" media="screen">
            /*div#jqt ul li {
                background-color: #ffeab1;
                font-family: "Marker Felt";
                color: #000;
                border-top: 1px solid #a2a14d;
            }
            div#jqt ul li input[type="checkbox"] {
                background-color: #e8a322;
                border: 2px solid #e8a322;
            }
            div#jqt ul li input[type="text"], div#jqt ul li textarea {
                background-color: #ffeab1;
            }
            div#jqt textarea {
                background-color: #e8a322;
            }*/
            div#jqt .complete span {
                text-decoration: line-through;
            }/*
            div#jqt li small {
                opacity: 0;
                overflow: hidden;
                width: 0 !important;
                -webkit-transition: 250ms all ease-in-out;
            }
            div#jqt li.editingmode small {
                opacity: 1;
                width: 50% !important;
            }
            div#jqt .toolbar {
                background: url() top left repeat-x;
                border: 0;
                border-bottom: 1px solid #000;
            }
            #jqt  > .edgetoedge, #jqt > * {
                background: #ffeab1 none;
            }
            div#jqt .toolbar .btn2 {
                -webkit-border-radius: 5px;
                -webkit-border-image: none;
                display: block;
                background: rgba(40, 29, 25, .4) none !important;
                padding: 6px;
                border: 1px solid #372823;
                float: left;
                color: #fff;
                -webkit-box-shadow: rgba(255,255,255, .4) 0 1px 0;
                text-decoration: none;
                position: absolute;
                top: 5px;
                right: 10px;
                font-size: 13px;
                text-shadow: #000 0 -1px 0;
                display: inline;
            }
            div#jqt .btn2.active {
                background-color: rgba(0,0,0,.5);
            }
            div#jqt .edgetoedge h4 {
                border: 0;
                background: url() top left repeat-x;
                color: #ffeab1;
                border-bottom: 1px solid #9d7062;
                border-top: 1px solid #9d7062;
            }*/
        </style>